<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Aizen
  Date: 2021/12/3
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>花礼网后台管理系统-商品列表</title>
  <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="js/jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="css/Top.css">
  <link rel="stylesheet" href="css/Left.css">
  <link rel="stylesheet" href="css/commodityList.css">
  <style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    input[type="number"]{
      -moz-appearance: textfield;
    }


    .fileimg{
      width: 150px;
      height: 150px;
      opacity: 0;
      z-index: 20;
      position: absolute;
      top: 0px;
    }
    .fileimgclass{
      border: 1px solid black;
      width: 150px;
      height: 150px;
      position: relative;
      font-size: 140px;
      text-align: center;
      line-height: 150px;
      color: #00000090;
    }

    .fileBox{
      /*border: 1px solid red;*/
      width: 100%;
    }
    .fileBox:after{
      content: "";
      display: block;
      clear: both;
    }
    .fileBox>*{
      margin-right: 5px;
      float: left;
    }


  </style>
</head>
<body>
<div class="container-fluid">

  <div class="row">
    <div class="col-md-2 stick"><%@include file="Left.jsp"%></div>
    <div class="col-md-10 col-md-offset-2"><%@include file="Top.jsp"%></div>
    <div class="col-md-10 col-md-offset-2">
      <form class="form-horizontal" action="manager/addCommodityClassServlet.shtml" method="post" enctype="multipart/form-data">

        <div class="form-group">
          <label class="col-sm-2 control-label">分类名称</label>
          <div class="col-sm-10">
            <input type="text" name="className" class="form-control" maxlength="10">
          </div>
        </div>



        <div class="form-group">
          <label class="col-sm-2 control-label">隶属类别</label>
          <div class="col-sm-10">
            <select class="form-control" name="pId" id="class">
              <option value="0" type="1">无(添加为一级类别)</option>
              <option value="" disabled>《《《一级分类》》》</option>
              <c:forEach items="${requestScope.classList}" var="c">
                <c:if test="${c.type==1}">
                  <option value="${c.id}" type="1">${c.name}</option>
                </c:if>
              </c:forEach>
              <option value="" disabled>《《《二级分类》》》</option>
              <c:forEach items="${requestScope.classList}" var="c">
                <c:if test="${c.type==2}">
                  <option value="${c.id}" type="2">${c.name}</option>
                </c:if>
              </c:forEach>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">指向链接</label>
          <div class="col-sm-10">
            <input type="text" name="classHref" class="form-control" maxlength="10" placeholder="例：index.shtml">
          </div>
        </div>



        <div class="form-group" id="classImg" hidden="hidden">
          <label class="col-sm-2 control-label">分类图片</label>
          <div class="col-sm-10">
            <div class="fileBox">
              <div class="fileimgclass">+
                <input type="file" name="classImage" class="fileimg" style="float: left">
              </div>
            </div>
          </div>
        </div>


        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">添加</button>
            <a href="manager/commodityClassServlet"><button type="button" class="btn btn-default">取消</button></a>
          </div>
        </div>



      </form>
    </div>
  </div>
</div>
</body>
<script>
  $(function (){
    //左侧‘分类管理’变红
    $("#ul li:nth-child(5) a").css("color","red");
    $("#let").html("分类管理");

    //隶属分类改变事件
    $("#class").change(function (){
       let val = $(this).val();
       let ele = $(this).children("option[value="+val+"]");
       let type = ele.attr("type");
        if(type=="2"){
          $("#classImg").show();
        }else{
          $("#classImg").hide();
        }



    })







    $('.fileimg').change(function(e){
      $(this).parent().parent().children("img").remove();
      let fileMsg = e.currentTarget.files;
      for (let i = 0; i < fileMsg.length; i++) {
        let fileName = fileMsg[i].name;
        //类型
        let fileType = fileMsg[i].type;
        console.log(fileType);
        // 判断文件类型
        let type=(fileType.substr(fileType.lastIndexOf("/"))).toLowerCase();
        console.log(type);
        if(type!="/jpg"&&type!="/gif"&&type!="/jpeg"&& type!="/png"){
          alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
          return false;
        }
        let img = $("<img id='im' src='' alt='' style='width: 150px;height: 150px;float: left'>");
        $(img).attr("src","image/commodity/"+fileName);
        $(this).parent().parent().append(img);
      }
    })










  })
</script>
</html>
